<template>
  <div class="user-list-container">
    <!-- 左侧树形菜单 -->
    <el-aside class="left-sidebar">
      <el-tree 
        :data="treeData"
        node-key="id"
        ref="treeRef"
        @node-click="handleNodeClick"
        :props="defaultProps">
      </el-tree>
    </el-aside>
 
    <!-- 右侧主内容区 -->
    <div class="right-content">
      <!-- 顶部搜索栏 -->
      <el-header class="top-search-bar">
        <el-form 
          :inline="true"
          :model="searchForm"
          class="search-form">
          
          <el-form-item label="登录名称：" prop="loginName">
            <el-input 
              v-model="searchForm.loginName"  
              placeholder="请输入"
              clearable 
              style="width: 160px">
            </el-input>
          </el-form-item>
 
          <el-form-item label="手机号码：" prop="phoneNumber">
            <el-input 
              v-model="searchForm.phoneNumber"  
              placeholder="请输入"
              clearable 
              style="width: 180px">
            </el-input>
          </el-form-item>
 
          <el-form-item label="用户状态：" prop="userStatus">
            <el-select 
              v-model="searchForm.userStatus"  
              placeholder="所有"
              clearable 
              style="width: 120px">
              <el-option label="所有" value=""></el-option>
              <el-option label="启用" value="enabled"></el-option>
              <el-option label="禁用" value="disabled"></el-option>
            </el-select>
          </el-form-item>
 
          <el-form-item label="创建时间：" prop="createTime">
            <el-date-picker 
              v-model="searchForm.createTime"  
              type="daterange"
              range-separator="至"
              start-placeholder="开始"
              end-placeholder="结束"
              value-format="yyyy-MM-dd"
              style="width: 300px">
            </el-date-picker>
          </el-form-item>
          <el-button 
            type="primary"
            :icon="Search"
            @click="handleSearch">
            搜索 
          </el-button>
          <el-button 
            type="info"
            :icon="Refresh"
            @click="handleReset">
            重置 
          </el-button>
        </el-form>
      </el-header>
 
      <!-- 表格区域 -->
      <el-main class="main-table">
        <el-table 
          :data="filteredTableData"
          border 
          style="width: 100%"
          :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
          height="calc(100vh - 180px)"
          ref="tableRef">
          
          <el-table-column 
            prop="userId"
            label="用户ID"
            width="90"
            align="center"
            header-align="center">
          </el-table-column>
 
          <el-table-column 
            prop="loginName"
            label="登录名称"
            width="160"
            align="center"
            header-align="center"
            show-overflow-tooltip>
          </el-table-column>
 
          <el-table-column 
            prop="userName"
            label="用户名称"
            width="120"
            align="center"
            header-align="center">
          </el-table-column>
 
          <el-table-column 
            prop="department"
            label="部门"
            width="180"
            align="center"
            header-align="center">
          </el-table-column>
 
          <el-table-column 
            prop="phoneNumber"
            label="手机"
            width="150"
            align="center"
            header-align="center">
          </el-table-column>
 
          <el-table-column 
            label="用户状态"
            width="120"
            align="center"
            header-align="center">
            <template #default="scope">
              <span>{{ scope.row.userStatus  }}</span>
            </template>
          </el-table-column>
 
          <el-table-column 
            prop="createTime"
            label="创建时间"
            width="160"
            align="center"
            header-align="center">
          </el-table-column>
 
          <el-table-column 
            label="操作"
            width="200"
            fixed="right"
            align="center"
            header-align="center">
            <template #default="scope">
              <el-button type="primary" size="small" @click="handleEdit(scope.row)"> 编辑</el-button>
              <el-button type="danger" size="small" @click="handleDelete(scope.row)"> 删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </div>
 
    <!-- 编辑对话框 -->
    <el-dialog 
      v-model="editDialogVisible"
      :title="editForm.userId  ? '编辑用户信息' : '新增用户'"
      width="30%">
      <el-form :model="editForm" label-width="100px">
        <el-form-item label="登录名称">
          <el-input v-model="editForm.loginName"></el-input> 
        </el-form-item>
        <el-form-item label="用户名称">
          <el-input v-model="editForm.userName"></el-input> 
        </el-form-item>
        <el-form-item label="部门">
          <el-input v-model="editForm.department"></el-input> 
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="editForm.phoneNumber"></el-input> 
        </el-form-item>
        <el-form-item label="用户状态">
          <el-select v-model="editForm.userStatus"> 
            <el-option label="启用" value="enabled"></el-option>
            <el-option label="禁用" value="disabled"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveEdit">保存</el-button>
        </span>
      </template>
    </el-dialog>
 
    <!-- 删除确认对话框 -->
    <el-dialog 
      v-model="deleteDialogVisible"
      title="确认删除"
      width="30%">
      <span>确定要删除该用户吗？</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="deleteDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmDelete">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
 
<script setup>
import { ref, reactive, computed } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'
 
// 树形结构配置 
const defaultProps = reactive({
  children: 'children',
  label: 'label'
})
 
// 树形数据 
const treeData = ref([
  {
    id: 1,
    label: "计算机学院",
    children: [
      { id: 2, label: "计算机科学与技术" },
      { id: 3, label: "软件工程" },
      { id: 4, label: "网络工程" },
      { id: 5, label: "物联网工程" }
    ]
  }
])
 
// 搜索表单 
const searchForm = reactive({
  loginName: "",
  phoneNumber: "",
  userStatus: "",
  createTime: []
})
 
// 表格数据 
const tableData = ref([
  {
    userId: 55,
    loginName: '163401010311',
    userName: '杜金',
    department: '计算机科学与技术',
    phoneNumber: '○',
    userStatus: '○',
    createTime: '2020-01-06 18:09:54'
  },
  {
    userId: 54,
    loginName: '163401010312',
    userName: '董理',
    department: '计算机科学与技术',
    phoneNumber: '○',
    userStatus: '○',
    createTime: '2020-01-06 18:09:17'
  },
  {
    userId: 53,
    loginName: '163401010314',
    userName: '马行健',
    department: '计算机科学与技术',
    phoneNumber: '○',
    userStatus: '○',
    createTime: '2020-01-06 18:08:36'
  },
  {
    userId: 52,
    loginName: '163401010323',
    userName: '张昊辰',
    department: '网络工程',
    phoneNumber: '○',
    userStatus: '○',
    createTime: '2020-01-06 18:07:22'
  },
  {
    userId: 51,
    loginName: '163401010322',
    userName: '张庆阳',
    department: '软件工程',
    phoneNumber: '○',
    userStatus: '○',
    createTime: '2020-01-06 18:06:40'
  },
  {
    userId: 50,
    loginName: '163401010321',
    userName: '黄灿',
    department: '物联网工程',
    phoneNumber: '○',
    userStatus: '○',
    createTime: '2020-01-06 18:06:09'
  },
  {
    userId: 49,
    loginName: '163401010320',
    userName: '高钰清',
    department: '网络工程',
    phoneNumber: '○',
    userStatus: '○',
    createTime: '2020-01-06 18:05:37'
  },
  {
    userId: 48,
    loginName: '163401010319',
    userName: '王旭',
    department: '计算机科学与技术',
    phoneNumber: '○',
    userStatus: '○',
    createTime: '2020-01-06 18:04:57'
  },
  {
    userId: 1,
    loginName: 'admin',
    userName: 'admin',
    department: '计算机科学与技术',
    phoneNumber: '15841490867',
    userStatus: '○',
    createTime: '2018-03-16 11:33:00'
  }
])
 
// 对话框相关状态 
const editDialogVisible = ref(false)
const deleteDialogVisible = ref(false)
 
// 表单数据 
const editForm = reactive({})
const currentDeleteId = ref(null)
 
// 组件引用 
const treeRef = ref(null)
const tableRef = ref(null)
 
// 计算属性：过滤后的表格数据 
const filteredTableData = computed(() => {
  let filteredData = tableData.value  
 
  if (searchForm.loginName)  {
    filteredData = filteredData.filter(item  => item.loginName.includes(searchForm.loginName)) 
  }
 
  if (searchForm.phoneNumber)  {
    filteredData = filteredData.filter(item  => item.phoneNumber.includes(searchForm.phoneNumber)) 
  }
 
  if (searchForm.userStatus)  {
    filteredData = filteredData.filter(item  => item.userStatus  === searchForm.userStatus) 
  }
 
  if (searchForm.createTime  && searchForm.createTime.length  > 0) {
    const [startDate, endDate] = searchForm.createTime  
    filteredData = filteredData.filter(item  => {
      const date = new Date(item.createTime.split('  ')[0])
      return (!startDate || date >= new Date(startDate)) && (!endDate || date <= new Date(endDate))
    })
  }
 
  return filteredData 
})
 
// 方法 
const handleNodeClick = (data) => {
  console.log(' 点击节点:', data)
}
 
const handleSearch = () => {
  console.log(' 执行搜索:', searchForm)
}
 
const handleReset = () => {
  searchForm.loginName  = ""
  searchForm.phoneNumber  = ""
  searchForm.userStatus  = ""
  searchForm.createTime  = []
}
 
const handleEdit = (row) => {
  Object.assign(editForm,  JSON.parse(JSON.stringify(row))) 
  editDialogVisible.value  = true 
}
 
const saveEdit = () => {
  if (editForm.userId)  {
    // 编辑现有用户 
    const index = tableData.value.findIndex(item  => item.userId  === editForm.userId) 
    if (index !== -1) {
      tableData.value[index]  = { ...editForm }
    }
  } else {
    // 新增用户 
    editForm.userId  = Math.max(...tableData.value.map(item  => item.userId))  + 1 
    tableData.value.unshift({  ...editForm })
  }
  editDialogVisible.value  = false 
}
 
const handleDelete = (row) => {
  currentDeleteId.value  = row.userId  
  deleteDialogVisible.value  = true 
}
 
const confirmDelete = () => {
  tableData.value  = tableData.value.filter(item  => item.userId  !== currentDeleteId.value) 
  deleteDialogVisible.value  = false 
  currentDeleteId.value  = null 
}
</script>
 
<style scoped>
.user-list-container {
  display: flex;
  height: 100vh;
  background: #fff;
}
 
.left-sidebar {
  width: 240px;
  border-right: 1px solid #e6ebf5;
  overflow: auto;
  padding: 16px;
}
 
.right-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
 
.top-search-bar {
  background-color: #f0f2f5;
  padding: 16px;
  height: auto !important;
}
 
.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
 
.main-table {
  flex: 1;
  padding: 0 16px 16px;
  overflow: hidden;
}
 
.el-table {
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
 
.el-table::before {
  height: 0;
}
 
.el-table th {
  font-weight: 600;
}
 
.el-table .cell {
  padding: 8px 0;
}
</style>